<template>
	<view class="maxBox">
		<image :src="imgSrcTitle"
			class="viewImg"></image>
		<!-- mode="scaleToFill" -->
		<!-- 剧本详情页 -->
		<view class="box_details">
			<!-- 顶部 -->
			<view class="details_top">
				<view class="detImg">
					<image :src="imgSrcTitle"></image>
				</view>
				<view class="detText">
					<view class="mar tit">{{coverArr.scriptName}}</view>
					<view class="mar tit_name iconfont"><text class="icon1 icon-dianpu"></text>{{coverArr.office}}
					</view>
					<view class="mar peopleNum">
						<text class="icon_text iconfont"><text
								class="icon2 icon-wode-wode "></text>{{coverArr.peopleNum}}人</text>
						<text class="icon_text iconfont"><text
								class="icon3 icon-shijian"></text>{{coverArr.gameTime}}小时</text>
						<text class="icon_text iconfont"><text class="icon4 icon-chongdian"></text>
							<text v-if="coverArr.level == 0">简单</text>
							<text v-if="coverArr.level == 1">进阶</text>
							<text v-if="coverArr.level == 2">烧脑</text>
						</text>
					</view>
					<view class="mar">￥{{coverArr.scriptPrice}}/人</view>
					<!-- 想玩 -->
					<view class="mar collection">
						<text class="collection_text iconfont seat1"
							@click="clickState">
							<text v-show="collectionState==false">
								<text class="icon5 icon-jushoucang"></text>
								<text>想玩</text>
							</text>
							<text v-show="collectionState">
								<text class="icon5 icon-daohangshoucangyishoucang"></text>
								<text>已想玩</text>
							</text>
						</text>
						<text @click="played"
							class="collection_text iconfont seat2"><text
								class="icon6 icon-shoucangxiao"></text>玩过</text>
						<uni-popup ref="popupWindow"
							background-color="#484958"
							type="bottom">
							<view class="popupWindow">
								<!-- 星星 -->
								<uni-rate v-model="rateValue" />
								<!-- 	@change="onChangeStars"  -->
								<!-- 文本域 -->
								<textarea class="evaluateContent"
									placeholder-style="color:#fff"
									name=""
									id=""
									cols="30"
									rows="10"
									v-model="textareaContent"
									placeholder="请输入您的评价内容"></textarea>
								<view class="contentBtn">
									<button size="mini"
										@click="releaseContent">发布</button>
								</view>
							</view>
						</uni-popup>
					</view>
				</view>
			</view>
			<!-- 分类 -->
			<view>
				<text>分类：</text>
				<text class="classification"
					v-for="(i,v) in coverArr.otherTheme"
					:key="v">{{i}}&nbsp;></text>
			</view>
			<!-- 分享 -->
			<view class="share">
				<view class="share_icon">
					<text class="icon7 iconfont icon-qiche"></text>
					<button @click="launchCarpooling">发起拼车</button>
				</view>
				<uni-popup ref="share_Window"
					background-color="#fff"
					type="center">
					<view class="share_Window_view">
						<view @click="callPhone">电话：{{wxPhone}}</view>
						<view @click="shareBtnCopy(wxNum)">微信：{{wxNum}}(复制)</view>
						<button size="mini"
							@click="shareBtnCancel">取消</button>
					</view>
				</uni-popup>
				<view class="share_icon">
					<text class="icon8 iconfont icon-fenxiang1"></text>
					<button open-type="share">
						<view>分享</view>
					</button>
				</view>
			</view>
			<!-- 简介 -->
			<view class="brief_introduction">
				<view class="title">剧本简介</view>
				<view class="brief_color">
					<view class="brief_text">{{coverArr.scriptDescribe}}</view>
					<!-- 横向滚动 -->
					<view class="briefImg">
						<scroll-view scroll-x="true">
							<view class="briefImg_role"
								v-for="(i,v) in imgSrcArr"
								:key="v">
								<image :src="i"
									mode=""></image>
								<!-- <view>高海敏</view> -->
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 推荐剧本 -->
			<view class="recommendation">
				<view class="title">推荐剧本</view>
				<scroll-view scroll-x="true">
					<view @click="pushProject(w.id)"
						v-for="(w,e) in recommendProjectArr"
						class="briefImg_role"
						:key="e">
						<image :src="w.scriptUrl"
							mode=""></image>
						<view>{{w.scriptName}}</view>
					</view>
				</scroll-view>
			</view>
			<!-- 评分 -->
			<view class="script_score">
				<view class="title">剧本评分
					<text v-for="(i,v) in 4"
						:key="v"
						class="icon9 iconfont icon-star-full"></text>
					<text v-for="(i,v) in 1"
						:key="v"
						class="icon9 iconfont icon-star"></text>
					<text class="score">8分</text>
				</view>
				<view class="script_text">
					<text>推荐</text>
					<text>最新</text>
					<text>好评26</text>
					<text>差评</text>
					<text>长评价</text>
				</view>
				<view class="script_infor">
					<view class="script_information">
						<view>
							<image :src="imgSrcTitle"
								mode=""></image>
						</view>
						<view>
							<text>芜湖</text>
							<text>玩后评价</text>
							<br />
							<text>2022/05/28 20:20:49</text>
						</view>
						<view>
							<text v-for="(i,v) in 5"
								:key="v"
								class="icon9 iconfont icon-star-full"></text>

							<text>10分</text>
						</view>
					</view>
					<view class="commentContent">想玩硬核推理的，强烈推荐呢~</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import http from '../../../utils/http.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const host = http.BASE_URL
	let imgSrcTitle = ref('')
	let imgSrcArr = reactive([])
	let coverArr = reactive([])
	const popupWindow = ref(null)
	let rateValue = ref(5)
	let textareaContent = ref("")
	let recommendProjectArr = reactive([])
	const share_Window = ref(null)

	const wxNum = ref('')
	const wxPhone = ref('')


	let collectionState = ref(false)
	// onLoad((option) => {
	// 	console.log(option);
	// })

	const props = defineProps({
		id: Number
	})
	// 详情
	http.http({
		url: '/juben/selectScriptById',
		method: 'post',
		data: {
			scriptID: props.id
		},
	}).then((res) => {
		imgSrcTitle.value = host + res.data.data[0].otherURL[0];
		coverArr = res.data.data[0];
		res.data.data[0].otherURL.map((item) => {
			imgSrcArr.push(host + item)
		})
		imgSrcArr = new Set(imgSrcArr)
	})

	// 推荐剧本
	http.http({
		url: "/juben/getRecommendationScript",
		method: "get"
	}).then((res) => {
		res.data.data.map((item) => {
			recommendProjectArr.push({
				scriptUrl: host + item.scriptUrl,
				scriptName: item.scriptName,
				id: item.id
			})
		})
	})
	// 获取店铺信息
	http.http({
			url: '/juben/getStore',
			method: "get"
		})
		.then((res) => {
			wxNum.value = res.data.data[0].wechat
			wxPhone.value = res.data.data[0].storeManagerPhone
		})
	// 点击推荐剧本
	let pushProject = (value) => {
		uni.navigateTo({
			url: '/pages/script/scriptDetails/scriptDetails?id=' + value
		})
	}
	// 想玩
	let clickState = () => {
		collectionState.value = !(collectionState.value)
	}
	// 弹窗显示
	let played = () => {
		popupWindow.value.open('bottom')
	}
	//发布
	let releaseContent = () => {
		console.log(textareaContent.value, rateValue.value);
		popupWindow.value.close()
	}
	// 发起拼车
	let launchCarpooling = () => {
		share_Window.value.open('bottom')
	}
	// 发起拼车弹窗----复制
	let shareBtnCopy = (value) => {
		uni.setClipboardData({
			data: String(value),
			success: function() {
				console.log('复制成功');
				share_Window.value.close()
			}
		});
	}
	// 拨打电话
	let callPhone = () => {
		uni.makePhoneCall({
			phoneNumber: wxPhone.value,
			fail: (err) => {
				console.log('取消拨打' + err);
			}
		})
	}
	// 发起拼车弹窗----取消
	let shareBtnCancel = () => {
		share_Window.value.close()
	}
	// 分享
	let shareBtn = () => {
		share.value.open()
	}
</script>

<style lang="scss">
	@import url('~@/static/iconfont/iconfont.css');

	page {
		height: 100%;
	}

	.maxBox {
		position: relative;
		height: 100%;

		// 背景图
		.viewImg {
			width: 750rpx;
			height: 100%;
			position: fixed;
			filter: blur(6px); //背景虚化
		}

		.box_details {
			position: absolute;
			left: 0;
			top: 0;
			width: 750rpx;
			color: #fff;
			z-index: 999;
			padding: 20rpx 20rpx 0 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.title {
				text-align: left;
				font-size: 40rpx;
				margin: 20rpx 0;
			}



			// 头部
			.details_top {

				display: flex;


				.detImg {
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 280rpx;
						height: 380rpx;
					}
				}

				// 顶部右侧
				.detText {
					width: 450rpx;
					padding: 15rpx 0 0 15rpx;
					box-sizing: border-box;

					.mar {
						margin-bottom: 25rpx;
					}

					.tit {
						font-size: 40rpx;
					}

					.tit_name {
						color: #ccc;

						.icon1 {
							color: #3ac995;
							margin-right: 15rpx;
						}
					}

					.peopleNum {
						.icon_text {
							font-size: 26rpx;
							margin-right: 10rpx;
						}

						.icon2 {
							font-size: 36rpx;
							color: #ff7520;
						}

						.icon3 {
							font-size: 36rpx;
							color: #a385fa;
						}

						.icon4 {
							font-size: 36rpx;
							color: #5990fe;
						}
					}

					:nth-child(4) {
						color: orange;
					}
				}

				// 想玩---玩过
				.collection {

					&::after {
						content: "";
						display: block;
						clear: both;
					}

					.seat1 {
						float: left;
						text-align: center;
					}

					.seat2 {
						float: right;
						text-align: center;
						margin-right: 40rpx;
					}

					.collection_text {
						width: 180rpx;
						height: 70rpx;
						line-height: 70rpx;
						display: inline-block;
						box-sizing: border-box;
						border-radius: 10rpx;
						background-color: rgba(74, 74, 81, 0.8);

						.icon5 {
							color: #cc514a;
							margin-right: 15rpx;
						}

						.icon6 {
							color: orange;
							margin-right: 15rpx;
						}
					}

					// 玩过---弹窗
					.popupWindow {
						height: 700rpx;
						padding: 20rpx;

						// 评价文本域
						.evaluateContent {
							width: 710rpx;
							height: 500rpx;
							font-size: 35rpx;
							margin-top: 20rpx;
						}

						// 发布按钮
						.contentBtn {
							margin-top: 20rpx;
							margin-right: 40rpx;
							text-align: right;

							button {
								width: 180rpx;
								height: 80rpx;
								line-height: 80rpx;
								font-size: 30rpx;
								background-color: #54b6c8;
								color: #fff;
							}
						}
					}
				}
			}

			// 分类
			.classification {
				display: inline-block;
				padding: 5rpx 10rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				background-color: rgba(74, 74, 81, 0.8);
				margin: 20rpx 15rpx 20rpx 0;
			}

			// 发起拼车，分享
			.share {
				height: 200rpx;
				border-radius: 30rpx;
				background-color: rgba(74, 74, 81, 0.8);
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;

				.share_icon {
					flex: 1;
					margin: 0;

					button {
						background-color: transparent;
						color: #fff;
						font-size: 32rpx;

						&::after {
							border: none;
						}
					}


					.icon7 {
						color: #f5804f;
						font-size: 60rpx;
					}

					.icon8 {
						color: #4eccfe;
						font-size: 60rpx;
					}
				}

				.share_Window_view {
					text-align: center;
					margin: 0 auto;
					width: 600rpx;
					height: 400rpx;
					color: #07c160;

					:nth-child(1) {
						margin: 50rpx auto;
						padding-bottom: 30rpx;
						width: 500rpx;
						border-bottom: 1px solid #ccc;
					}

					:nth-child(2) {
						margin: 0 auto;
						width: 500rpx;
						padding-bottom: 30rpx;
						border-bottom: 1px solid #ccc;
					}

					button {
						margin-top: 60rpx;
						width: 250rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 28rpx;
						color: #07c160;
					}
				}
			}

			// 简介
			.brief_introduction {
				.brief_color {
					background-color: rgba(74, 74, 81, 0.8);
					border-radius: 15rpx;
				}

				.brief_text {
					border-radius: 20rpx;
					padding: 20rpx;
					font-size: 28rpx;
				}

				.briefImg {
					scroll-view {
						white-space: nowrap;

						.briefImg_role {
							margin: 0 10rpx;
							display: inline-block;

							image {
								width: 250rpx;
								height: 320rpx;
								border-radius: 18rpx;
							}

							view {
								text-align: center;
							}
						}
					}
				}
			}

			// 推荐剧本
			.recommendation {
				text-align: center;
				white-space: nowrap;

				image {
					width: 200rpx;
					height: 280rpx;
					border-radius: 15rpx;
				}

				.briefImg_role {

					margin: 0 10rpx;
					display: inline-block;

					view {
						text-align: center;
					}
				}
			}

			// 评分
			.script_score {
				.icon9 {
					color: #ffb51a;
					font-size: 30rpx;
				}

				.score {
					font-size: 30rpx;
					margin-left: 10rpx;
				}

				.script_text {
					margin-bottom: 20rpx;

					text {
						display: inline-block;
						padding: 0rpx 15rpx;
						border-radius: 10rpx;
						margin-right: 15rpx;
						font-size: 26rpx;
						background-color: rgba(74, 74, 81, 0.8);
					}
				}

				// 评价信息
				.script_infor {
					padding: 15rpx 15rpx 30rpx 15rpx;
					border-radius: 15rpx;
					background-color: #3a3a46;

					.script_information {
						display: flex;

						view {
							margin: 0;
							justify-content: center;
							align-items: center;

							&:nth-child(1) {
								flex: 1;

								image {
									border: 1px solid yellow;
									border-radius: 50%;
									width: 80rpx;
									height: 80rpx;
								}
							}

							&:nth-child(2) {
								flex: 4;
								font-size: 30rpx;
								padding-left: 20rpx;

								text:nth-child(2) {
									font-size: 24rpx;
									background-color: #833a33;
									border-radius: 8rpx;
									margin-left: 15rpx;
									padding: 0 10rpx;
								}

								text:nth-child(4) {
									color: #ccc;
									font-size: 24rpx;
								}
							}

							&:nth-child(3) {
								flex: 4;
								text-align: right;
								padding-top: 3%;

								text {
									margin-left: 6rpx;
								}

								:last-of-type {
									font-size: 26rpx;
									margin-left: 5rpx;
								}
							}
						}
					}

					.commentContent {
						padding-left: 10rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>
